import * as echarts from "echarts"
/**
 * 颜色
 */
const countryColors = [
  "#0984e3",
  "#55efc4",
  "#fdcb6e",
  "#8dd8e8",
  "#rgb(152, 214, 228)",
  "#000",
  "#f93",
  "#bc002d",
]

/**
 * 本月产品销售榜
 * @param {*} xAxis x轴数据
 * @param {*} data  y轴数据
 * @returns
 */
export const salesChartOpt = (xAxis, data) => {
  return {
    //
    backgroundColor: "#0e1d38", //rgba设置透明度0.1
    title: {
      text: "本月产品销售榜",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },

    xAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
        max: "dataMax",
        formatter: function (n) {
          return Math.round(n) + ""
        },
      },

      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: xAxis,
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: "dataMax",
      axisLabel: {
        show: true,
        fontSize: 14,
        formatter: function (value) {
          return value
        },
      },
    },
    grid: {
      left: "10%",
      right: "4%",
      top: "20%",
      bottom: "5%",
      containLabel: true,
    },
    series: {
      type: "bar",
      realtimeSort: true,
      seriesLayoutBy: "column",
      total: true,
      itemStyle: {
        color: "#0984e3",
      },
      data,
      label: {
        formatter: "{c}",
        show: true,
        position: "right",
        align: "center",
        margin: [100, 0, 0, 100],
        textStyle: {
          fontSize: "14",
          color: "#fff",
        },
      },
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: "linear",
    animationEasingUpdate: "linear",
  }
}

/**
 * 库存总览（单位数量）
 */

export const lineChartOpt = (xAxis, lineData, barData) => {
  return {
    backgroundColor: "#0e1d38", //rgba设置透明度0.1
    title: {
      text: "库存总览（单位数量）",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "10%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xAxis,
      },
    ],
    yAxis: [
      {
        show: true,
        type: "value",
        name: "基本单位数量",
        nameTextStyle: {
          fontSize: 14,
        },
        alignTicks: true,
        nameGap: -80,
        nameRotate: 90,
        axisLabel: {
          formatter: "{value}个",
        },
      },
      {
        show: true,
        type: "value",
        name: "周转率",
        alignTicks: true,
        nameTextStyle: {
          fontSize: 14,
        },
        nameGap: -50,
        nameRotate: -90,
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        total: true,
        label: {
          formatter: "{c}%",
          show: true,
          position: "top",
          align: "center",
          margin: 20,
          textStyle: {
            fontSize: "14",
            color: "#faca77",
          },
        },
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + "%"
          },
        },
        itemStyle: {
          color: "#faca77",
        },
        data: lineData,
      },
      {
        type: "bar",
        smooth: true,
        areaStyle: {},
        showBackground: true,
        barWidth: "20%",
        itemStyle: {
          color: "#3799ce",
        },
        total: true,
        label: {
          formatter: "{c}个",
          show: true,
          position: "top",
          align: "center",
          margin: [0, 10, 0, 0],
          textStyle: {
            fontSize: "14",
            color: "#fff",
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + "个"
          },
        },
        data: barData,
      },
    ],
  }
}


/**
 * 环形占比设备 ['#38a8da', '#182f82']
 */

export const deviceChartOpt = (colorList, data) => {

  return {
    color: colorList,
    title: {
      top: '3%',
      left: '1%',
      textStyle: {
        color: '#333',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 16,
      },
    },
    series: [
      {
        name: '设备状态',
        type: 'pie',
        radius: ['60%', '75%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          normal: {
            show: false,
            position: 'center',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontWeight: 'bold',
            },
            formatter: '{b}\n{c}台',
          },
        },
        data: [
          {
            value: data.num - data.value,
            name: '',
          },
          {
            value: data.value,

            label: {
              normal: {
                show: true,
              },
            },
          },

        ],
      },
    ],
  }

}

/**
 * 告警前10
 */
export const giveAlarmOpt = (data) => {

  return {
    // title: {
    //   text: 'World Population'
    // },
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // }
    },
    // legend: {},
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      // boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        rotate: 35,//35度角倾斜显示
        color: '#fff'
      },
      data: data.yzName
    },
    series: [
      {

        type: 'bar',
        data: data.xzNum,
        barWidth: 25,
        label: {
          show: true,
          color: "#4ad7c5",
          position: "right",
          formatter: '{c}次'
        },
        itemStyle: {
          normal: {
            //这里是颜色
            color: '#4ad7c5'
          }
        }

      },

    ]
  }

};


